<template>
	<view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
			 @scroll="scroll">
			 <view class="pricebox">
			 	<view class="title">
			 		价格区间
			 	</view>
			 	<view class="numbox">
			 		<view class="inputbox">
			 			<input placeholder="最低价" v-model="filterinfo.goods_price_min" />
			 		</view>
			 		<view class="line"></view>
			 		<view class="inputbox">
			 			<input placeholder="最高价" v-model="filterinfo.goods_price_max" />
			 		</view>
			 	</view>
			 </view>
			<!-- <view class="brandbox">
				<view class="title">
					品牌
				</view>
				<view class="brandlist">
					<view class="branditem" v-for="(item,index) in brandlist" :key="index" @click="handlebrand(index)"
					:style="{'color':index==brandindex?'#F94D29':'','border':index==brandindex?'2rpx solid #F94D29':''}">
						{{item}}
					</view>
				</view>
			</view> -->
			<view class="brandbox">
				<view class="title">
					分类
				</view>
				<view class="brandlist">
					<view class="branditem" v-for="(item,index) in childCate" :key="index" @click="handleclassify(index,item)"
					:style="{'color':index==classifyindex?'#F94D29':'','border':index==classifyindex?'2rpx solid #F94D29':''}">
						{{item.name}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view style="height: 104rpx;"></view>
		<view class="navbut">
			<view class="butbox">
				<view class="resetbox"  @click="reset()">
					重置
				</view>
				<view class="sure" @click="handlesure()">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "screen",
		props:{
			childCate:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				brandlist:['伊利','蒙牛','三元','QQ星','特仑苏','特仑苏','特仑苏','特仑苏'],//品牌列表
				brandindex:null,//品牌索引
				classifyindex:null,//分类索引
				filterinfo:{
					goods_price_min:'',//最低价
					goods_price_max:'',//最高价
					classify:{},
				},
			};
		},
		methods:{
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			//品牌
			handlebrand(index){
				this.brandindex = index
			},
			//分类
			handleclassify(index,item){
				this.classifyindex = index
				this.filterinfo.classify = item
			},
			//重置
			reset(){
				this.classifyindex = null
				this.filterinfo={
					goods_price_min:'',//最低价
					goods_price_max:'',//最高价
					classify:{},
				}
			},
			handlesure(){
				if(parseFloat(this.filterinfo.goods_price_min)>=parseFloat(this.filterinfo.goods_price_max)){
					uni.showToast({
						title:'最低价不能大于或等于最高价',
						icon:'none'
					})
					return
				}
				console.log(this.filterinfo)
				this.$emit('filterdata',this.filterinfo)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.scroll-Y {
		height: calc(100vh - 104rpx);
		.pricebox {
			width: 510rpx;
			height: 224rpx;
			background: #FFFFFF;
			border-radius: 20rpx 0rpx 0rpx 20rpx;
			padding: 0 30rpx;
		
			.title {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				height: 112rpx;
				line-height: 112rpx;
			}
		
			.numbox {
				display: flex;
				align-items: center;
		
				.inputbox {
					width: 220rpx;
					height: 72rpx;
					background: #F7F7F7;
					border-radius: 40rpx;
					text-align: center;
		
					>input {
						height: 72rpx;
					}
				}
		
				.line {
					width: 34rpx;
					height: 0rpx;
					opacity: 1;
					border: 2rpx solid #999999;
					margin: 0 20rpx;
				}
			}
		}
		
		.brandbox {
			width: 510rpx;
			// height: 392rpx;
			background: #FFFFFF;
			border-radius: 20rpx 0rpx 0rpx 20rpx;
			padding: 0 30rpx 18rpx 30rpx;
			margin: 16rpx 0;
		
			.title {
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				height: 112rpx;
				line-height: 112rpx;
			}
			.brandlist{
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.branditem {
					width: fit-content;
					height: 72rpx;
					border-radius: 40rpx;
					opacity: 1;
					border: 2rpx solid #999999;
					padding: 0 50rpx;
					line-height: 72rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #222222;
					margin: 0 22rpx 24rpx 0;
				}
			}
				
		}
		
	}
	.navbut{
		position: fixed;
		z-index: 99;
		bottom: 0rpx;
		width: 100%;
		height: 104rpx;
		background-color: #F7F7F7;
		.butbox{
			width: 510rpx;
			height: 84rpx;
			background: #F94D29;
			border-radius: 42rpx ;
			border: 2rpx solid #F94D29;
			margin: 0 auto;
			display: flex;
			align-items: center;
			.resetbox{
				width: 254rpx;
				height: 84rpx;
				background: #FFFFFF;
				border-radius: 42rpx 0rpx 42rpx 42rpx;
				opacity: 1;
				text-align: center;
				line-height: 84rpx;
				color: #F94D29;
			}
			.sure{
				width: 256rpx;
				text-align: center;
				line-height: 84rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
